import {PureComponent} from 'react';
import {
  Card,
  Row,
  Col,
  Image,
  Tag,
  Dropdown,
  Menu,
  message
} from 'antd';
import React from 'react';
import {cancelFollow, getCurrentUser, queryById, userAction} from "@/pages/UserInfo/service";
import {getUrlParam} from "@/utils/ParamUtil";
import {CloseOutlined, MessageOutlined, PlusOutlined} from "@ant-design/icons";
import {history} from "@@/core/history";
import {init} from "@/utils/WebSocketUtil";
import {show} from "@/utils/NotificationUtil";


class UserInfo extends PureComponent{

  state = {
    userInfo: null,
    currentUser: window.top.user
  }

  componentDidMount() {
    const id = getUrlParam(window.location.href, 'id');
    if (id){
      queryById({id: id}).then(res => {
        if (res && res.id){
          this.setState({ userInfo: res });
        }
      });
      //增加主页访问量
      if (id != this.state.currentUser.id){
        userAction({
          userId: this.state.currentUser.id,
          objId: id,
          actionType: 'view'
        })
      }
    }else {
      history.push('/welcome');
    }
  }

  handleMenuClick = e => {
    const { currentUser, userInfo } = this.state;
    if (e.key == 'cancelFollow'){
      cancelFollow({
        userId: currentUser.id,
        flowUserId: userInfo.id
      }).then(res => {
        if (res.status === 200){
          this.refreshUser();
          message.success('取关成功！');
        }
      })
    }
  };

  follow = () => {
    const { currentUser, userInfo } = this.state;
    userAction({
      userId: currentUser.id,
      objId: userInfo.id,
      actionType: 'follow'
    }).then(res => {
      if (res.status === 200){
        this.refreshUser();
        this.sendNotification();
        message.success('关注成功！');
      }
    })
  };

  refreshUser = () => {
    getCurrentUser().then(u => {
      if (u.status == 200){
        window.top.user = u.data;
        this.setState({ currentUser: u.data });
      }
    })
  };

  sendNotification = () => {
    const { userInfo, currentUser } = this.state;
    if (!window.socket){
      init(currentUser.loginName);
    }
    if (window.socket){
      window.socket.send(`notification-/userInfo?id=${currentUser.id}-<span style="color: #7dd4b8">${currentUser.loginName}</span> 关注了你|${userInfo.loginName}`);
    }else {
      show('WebSocket错误', '失去连接', 'error');
    }
  };

  connectChat = id => {
    message.info('功能开发中。。。');
    // window.open('/privateChat?id=' + id, '_blank');
  }

  render() {
    const { userInfo, currentUser } = this.state;

    const menu = (
      <Menu
        onClick={this.handleMenuClick}
        items={[
          {
            label: '取消关注',
            key: 'cancelFollow',
            icon: <CloseOutlined />,
          }
        ]}
      />
    );

    return (
      <>
        {userInfo && [
        <Card bordered={false}>
          <Row>
            <Col span={6}>
              <Image src={userInfo.avatar} alt={'头像'} />
            </Col>
            <Col span={16} offset={1}>
              <Row>
                <Col span={24}>
                  <span>
                    <span style={{ fontWeight: '600', fontSize: '18px' }}>{userInfo.loginName}</span>&nbsp;&nbsp;
                    <Tag style={{marginRight: '5%'}} color={userInfo.roleId == 1 ? 'gold' : (userInfo.roleId == 3 ? 'orange' : 'cyan')}>{userInfo.roleDesc}</Tag>
                    {currentUser.id != userInfo.id &&
                    (currentUser.follows && currentUser.follows.length > 0 && currentUser.follows.filter(f => f.id == userInfo.id).length > 0 &&
                      <Dropdown.Button  overlay={menu}>
                        {currentUser.fans && currentUser.fans.length > 0 && currentUser.fans.filter(f => f.id == userInfo.id).length > 0 ? '互相关注' : '已关注'}
                      </Dropdown.Button>
                    || <a onClick={this.follow}><PlusOutlined />关注</a>)}
                    {currentUser.follows && currentUser.follows.length > 0 && currentUser.follows.filter(f => f.id == userInfo.id).length > 0 &&
                    <a onClick={() => this.connectChat(userInfo.id)} style={{float: 'right'}}><MessageOutlined /> 私信</a>}
                  </span>
                </Col>
              </Row>
              <Row style={{ marginTop: '5%' }}>
                <Col span={24}>
                  <span style={{ fontSize: '15px' }}>{userInfo.signature && userInfo.signature || `暂无个人简介`}</span>
                </Col>
              </Row>
              <Row style={{ marginTop: '5%' }}><Col span={24}>{userInfo.tags ? userInfo.tags.split(',').map((item) => <Tag>{item}</Tag>) : `暂无标签`}</Col></Row>
            </Col>
          </Row>
        </Card>,
        <Card style={{ marginTop: '1%', fontSize: '15px' }}>
          <Row>
            <Col span={24}>
              性别：<span style={{ marginLeft: '1%' }}>{userInfo.sex || '未知'}</span>
            </Col>
          </Row>
          <Row style={{ marginTop: '1%' }}>
            <Col span={24}>
              年龄：<span style={{ marginLeft: '1%' }}>{userInfo.age || '未知'}</span>
            </Col>
          </Row>
          <Row style={{ marginTop: '1%' }}>
            <Col span={24}>
              邮箱：<span style={{ marginLeft: '1%' }}>{userInfo.email || '暂无'}</span>
            </Col>
          </Row>
          <Row style={{ marginTop: '1%' }}>
            <Col span={24}>
              地址：<span style={{ marginLeft: '1%' }}>{userInfo.address || '暂无'}</span>
            </Col>
          </Row>
          <Row style={{ marginTop: '1%' }}>
            <Col span={24}>
              电话：<span style={{ marginLeft: '1%' }}>{userInfo.phone || '暂无'}</span>
            </Col>
          </Row>
          <Row style={{ marginTop: '1%' }}>
            <Col span={24}>
              注册时间：<span style={{ marginLeft: '1%' }}>{userInfo.createTime || '无'}</span>
            </Col>
          </Row>
        </Card>
        ]}
      </>
    )
  }
}

export default UserInfo;
